<!DOCTYPE html>
<html>
    <head>
        <title>欢迎使用</title>
        <script src="../third/jquery-3.6.1.js"></script>
        <script src="../third/layui/layui.js"></script>
        <link rel="stylesheet" type="text/css" href="../third/layui/css/layui.css"/>
    </head>
    <body>
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <div class="layui-logo layui-hide-xs layui-bg-black">订单管理</div>
                <!-- 头部区域（可配合layui 已有的水平导航） -->
                <ul class="layui-nav layui-layout-left">
                <!-- 移动端显示 -->
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                </li>
                </ul>
                <ul class="layui-nav layui-layout-right" style="margin-right: 40px;">
                    <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                        <a href="javascript:;">
                        tester
                        </a>
                        <dl class="layui-nav-child">
                        <dd><a href="">Your Profile</a></dd>
                        <dd><a href="">Settings</a></dd>
                        <dd><a href="">Sign out</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        
            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <ul class="layui-nav layui-nav-tree" lay-filter="test">
                        <li class="layui-nav-item">
                            <a onclick="showPage(0)">订单区</a>
                        </li>
                        <li class="layui-nav-item layui-nav-itemed">
                            <a class="" href="javascript:;">车间区</a>
                            <dl class="layui-nav-child">
                                <dd class="layui-this"><a href="cxworkshop.html">成型车间</a></dd>
                                <dd class=""><a href="cxworkshop.html">烧结</a></dd>
                                <dd class=""><a href="cxworkshop.html">整形车间</a></dd>
                                <dd class=""><a href="cxworkshop.html">机加工</a></dd>
                                <dd class=""><a href="cxworkshop.html">热处理</a></dd>
                                <dd class=""><a href="cxworkshop.html">外协</a></dd>
                                <dd class=""><a href="cxworkshop.html">包装</a></dd>
                            </dl>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="layui-body" style="height:100%">
                <table class="layui-hide" id="InnerPage" lay-filter="InnerPage"></table>
                <script type="text/html" id="toolbarDemo">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                        <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
                        <button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</button>
                        <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
                            重载测试 
                            <i class="layui-icon layui-icon-down layui-font-12"></i>
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="multi-row">
                            多行
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="default-row">
                            单行
                        </button>
                        <button class="layui-btn layui-btn-sm" id="moreTest">
                            更多测试 
                            <i class="layui-icon layui-icon-down layui-font-12"></i>
                        </button>
                    </div>
                </script>
                <script type="text/html" id="cityTpl">
                    <select id="demoCity1" class="layui-border" lay-ignore>
                        <option value="浙江杭州">浙江杭州</option>
                        <option value="江西南昌">江西南昌</option>
                        <option value="湖北武汉">湖北武汉</option>
                    </select>
                </script>

                <script type="text/html" id="barDemo">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>
            </div>
            <div class="layui-footer">
                @copyright wys/lh
            </div>
        </div>
    </body>
    <script>
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element
                , layer = layui.layer
                , util = layui.util
                , $ = layui.$
            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    layer.msg('展开左侧菜单的操作', { icon: 0 });
                }
                , menuRight: function () {
                    layer.open({
                        type: 1
                        , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    })
                }
            })
        })

        layui.use(['table', 'dropdown'], function () {
            var table = layui.table
            var dropdown = layui.dropdown
            // 创建渲染实例
            table.render({
                elem: '#InnerPage'
                // , url: '../static/data/demo1.json' 
                , data: [{
                    "id": "10001"
                    ,"username": "杜甫"
                    ,"email": "xianxin@layui.com"
                    ,"sex": "男"
                    ,"city": "浙江杭州"
                    ,"sign": "点击此处，显示更多。当内容超出时，点击单元格会自动显示更多内容。"
                    ,"experience": "116"
                    ,"ip": "192.168.0.8"
                    ,"logins": "108"
                    ,"joinTime": "2016-10-14"
                }, {
                    "id": "10002"
                    ,"username": "李白"
                    ,"email": "xianxin@layui.com"
                    ,"sex": "男"
                    ,"city": "浙江杭州"
                    ,"sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。"
                    ,"experience": "12"
                    ,"ip": "192.168.0.8"
                    ,"logins": "106"
                    ,"joinTime": "2016-10-14"
                    ,"LAY_CHECKED": true
                }, {
                    "id": "10003"
                    ,"username": "王勃"
                    ,"email": "xianxin@layui.com"
                    ,"sex": "男"
                    ,"city": "浙江杭州"
                    ,"sign": "人生恰似一场修行"
                    ,"experience": "65"
                    ,"ip": "192.168.0.8"
                    ,"logins": "106"
                    ,"joinTime": "2016-10-14"
                },]
                , toolbar: '#toolbarDemo'
                , defaultToolbar: ['filter', 'exports', 'print', {
                    title: '帮助'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , height: 'full-120' // 最大高度减去其他容器已占有的高度差
                , cellMinWidth: 80
                , totalRow: true // 开启合计行
                , page: true
                , cols: [[
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true, totalRowText: '合计：' }
                    , { field: 'username', width: 80, title: '用户' }
                    , { field: 'email', title: '邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, width: 150, edit: 'text' }
                    , { field: 'sex', width: 80, title: '性别', sort: true }
                    , {
                        field: 'city', width: 115, title: '城市', minWidth: 115, templet: '#cityTpl', exportTemplet: function (d, obj) {
                            //console.log(obj)
                            // 处理该字段的导出数据
                            var td = obj.td(this.field); //获取当前 td
                            return td.find('select').val();
                        }
                    }
                    , { field: 'sign', title: '签名', edit: 'textarea', minWidth: 260, style: '-moz-box-align: start;' }
                    , { field: 'experience', width: 100, title: '积分', sort: true, totalRow: '{{= d.TOTAL_NUMS }} 😊' }
                    , { field: 'checkin', title: '打卡', width: 100, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次' }
                    , { field: 'ip', title: 'IP', width: 120 }
                    , { field: 'joinTime', title: '加入时间', width: 120 }
                    , { fixed: 'right', title: '操作', width: 125, minWidth: 125, toolbar: '#barDemo' }
                ]]
                , done: function () {
                    var id = this.id;

                    // 重载测试
                    dropdown.render({
                        elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例
                        , data: [{
                            id: 'reload',
                            title: '重载'
                        }, {
                            id: 'reload-deep',
                            title: '重载 - 参数叠加'
                        }, {
                            id: 'reloadData',
                            title: '仅重载数据'
                        }, {
                            id: 'reloadData-deep',
                            title: '仅重载数据 - 参数叠加'
                        }]
                        // 菜单被点击的事件
                        , click: function (obj) {
                            switch (obj.id) {
                                case 'reload':
                                    // 重载 - 默认（参数重置）
                                    table.reload('test', {
                                        where: {
                                            abc: '123456'
                                            //,test: '新的 test2'
                                            //,token: '新的 token2'
                                        }
                                        /*
                                        ,cols: [[ // 重置表头
                                            {type: 'checkbox', fixed: 'left'}
                                            ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
                                            ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
                                            ,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
                                            ,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
                                            ,{field:'joinTime', title:'加入时间', width:120}
                                        ]]
                                        */
                                    });
                                    break;
                                case 'reload-deep':
                                    // 重载 - 深度（参数叠加）
                                    table.reload('test', {
                                        where: {
                                            abc: 123
                                            , test: '新的 test1'
                                        }
                                        //,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
                                        //,cols: ins1.config.cols
                                    }, true);
                                    break;
                                case 'reloadData':
                                    // 数据重载 - 参数重置
                                    table.reloadData('test', {
                                        where: {
                                            abc: '123456'
                                            //,test: '新的 test2'
                                            //,token: '新的 token2'
                                        }
                                        , scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                                        , height: 2000 // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
                                        //,url: '404'
                                        //,page: {curr: 1, limit: 30} // 重新指向分页
                                    });
                                    break;
                                case 'reloadData-deep':
                                    // 数据重载 - 参数叠加
                                    table.reloadData('test', {
                                        where: {
                                            abc: 123
                                            , test: '新的 test1'
                                        }
                                    }, true);
                                    break;
                            }
                            layer.msg('可观察 Network 请求参数的变化');
                        }
                    });

                    // 更多测试
                    dropdown.render({
                        elem: '#moreTest' //可绑定在任意元素中，此处以上述按钮为例
                        , data: [{
                            id: 'add',
                            title: '添加'
                        }, {
                            id: 'update',
                            title: '编辑'
                        }, {
                            id: 'delete',
                            title: '删除'
                        }]
                        //菜单被点击的事件
                        , click: function (obj) {
                            var checkStatus = table.checkStatus(id)
                            var data = checkStatus.data; // 获取选中的数据
                            switch (obj.id) {
                                case 'add':
                                    layer.open({
                                        title: '添加',
                                        type: 1,
                                        area: ['80%', '80%'],
                                        content: '<div style="padding: 16px;">自定义表单元素</div>'
                                    });
                                    break;
                                case 'update':
                                    if (data.length !== 1) return layer.msg('请选择一行');
                                    layer.open({
                                        title: '编辑',
                                        type: 1,
                                        area: ['80%', '80%'],
                                        content: '<div style="padding: 16px;">自定义表单元素</div>'
                                    });
                                    break;
                                case 'delete':
                                    if (data.length === 0) {
                                        return layer.msg('请选择一行');
                                    }
                                    layer.msg('delete event');
                                    break;
                            }
                        }
                    });
                }
                , error: function (res, msg) {
                    console.log(res, msg)
                }
            });

            // 工具栏事件
            table.on('toolbar(InnerPage)', function (obj) {
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);
                var othis = lay(this);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(layui.util.escape(JSON.stringify(data)));
                        break;
                    case 'getData':
                        var getData = table.getData(id);
                        console.log(getData);
                        layer.alert(layui.util.escape(JSON.stringify(getData)));
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选')
                        break;
                    case 'multi-row':
                        table.reload('test', {
                            // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                            lineStyle: 'height: 95px;'
                        });
                        layer.msg('即通过设置 lineStyle 参数可开启多行');
                        break;
                    case 'default-row':
                        table.reload('test', {
                            lineStyle: null // 恢复单行
                        });
                        layer.msg('已设为单行');
                        break;
                    case 'LAYTABLE_TIPS':
                        layer.alert('Table for layui-v' + layui.v);
                        break;
                };
            });

            //触发单元格工具事件
            table.on('tool(InnerPage)', function (obj) { // 双击 toolDouble
                var data = obj.data;
                //console.log(obj)
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        title: '编辑',
                        type: 1,
                        area: ['80%', '80%'],
                        content: '<div style="padding: 16px;">自定义表单元素</div>'
                    });
                }
            });

            //触发表格复选框选择
            table.on('checkbox(InnerPage)', function (obj) {
                console.log(obj)
            });

            //触发表格单选框选择
            table.on('radio(InnerPage)', function (obj) {
                console.log(obj)
            });

            // 行单击事件
            table.on('row(InnerPage)', function (obj) {
                console.log(obj);
                //layer.closeAll('tips');
            });
            // 行双击事件
            table.on('rowDouble(InnerPage)', function (obj) {
                console.log(obj);
            });

            // 单元格编辑事件
            table.on('edit(InnerPage)', function (obj) {
                var field = obj.field //得到字段
                    , value = obj.value //得到修改后的值
                    , data = obj.data; //得到所在行所有键值

                var update = {};
                update[field] = value;
                obj.update(update);
            });
        })

    </script>
</html>